<template>
  <div id="list-box">
    <!-- 添加模态框 -->
    <Modal title="添加分类" v-model="addMotal" width="380px" @on-ok="addType">
      <p class="type-item">
        <span>分类:</span>
        <Cascader
          v-model="typeVal"
          :data="typeList"
          trigger="hover"
          style="display:inline-block;width:240px;"
          placeholder="请选择分类"
          change-on-select
        ></Cascader>
      </p>
      <p class="type-item">
        <span>名称:</span>
        <Input v-model="typeName" placeholder="请输入分类名称" style="width: 240px"/>
      </p>
      <p class="type-item" v-show="this.isLasts">
        <span></span>
        <Upload
          action="//jsonplaceholder.typicode.com/posts/"
          style="display:inline-block;width:240px;border:0"
          :before-upload="startUp"
          type="drag"
        >
          <div style="padding: 20px 0;position:relative">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或拖拽上传图片</p>
            <div id="img-see" v-if="file">
              <img v-show="file" :src="global.serviceUrl + file" title="点击取消" @click.stop="cancel">
            </div>
          </div>
        </Upload>
      </p>
    </Modal>

    <div class="module">
      <div id="search-box">
        <div>
          <Cascader
            v-model="typeVal"
            :data="typeList"
            trigger="hover"
            style="display:inline-block;width:240px;"
            placeholder="请选择分类"
            change-on-select
          ></Cascader>
          <Button type="primary" icon="ios-search" @click="search"></Button>
        </div>
        <Button type="primary" icon="ios-add" @click="addMotal = true">添加</Button>
      </div>
      <Table
        border
        max-height="500px"
        ref="selection"
        :loading="loading"
        :columns="headers"
        :data="dataList"
        @on-selection-change="selectVal"
      >
        <template slot-scope="{ row, index }" slot="src">
          <span v-if="isLast && row.src">
            <img class="src-item" :src="global.serviceUrl + row.src" alt>
          </span>
          <span v-else>该分类不是末节点，不能上传图片</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            icon="ios-brush-outline"
            style="margin-right: 5px"
            @click="show(index)"
          ></Button>
          <Button type="error" size="small" icon="ios-trash-outline" @click="remove(index)"></Button>
        </template>
      </Table>
    </div>
  </div>
</template>
<script>
import { getTypeSelect, getTypes, uploads, addType } from "@/config/api";

export default {
  name: "article-list",
  data() {
    return {
      file: "", //分类文章
      typeName: "", //分类名称
      addMotal: false, //添加模态框
      isLast: false, //是否是子节点
      typeList: [], //分类数据
      typeVal: [], //选择分类
      loading: true, //表格加载状态
      headers: [
        {
          type: "selection",
          width: 60,
          fixed: "left",
          align: "center"
        },
        {
          title: "编号",
          width: 80,
          key: "id"
        },
        {
          title: "分类名称",
          key: "type_name"
        },
        {
          title: "图片",
          slot: "src"
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 150,
          align: "center"
        }
      ],
      dataList: [] //分类列表
    };
  },
  computed: {
    isLasts() {
      if (this.typeVal.length == 2) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    search() {
      if (this.typeVal.length != 0) {
        const index = this.typeVal.length - 1;
        //判断是否是子节点
        if (this.typeVal.length == 2) {
          this.isLast = true;
        } else {
          this.isLast = false;
        }
        const type = this.typeVal[index];
        this.getList(type);
      } else {
        this.isLast = false;
        this.getList();
      }
    },
    selectVal(status) {
      console.log(status);
    },
    //获取分类列表
    getList(type) {
      getTypes(type).then(result => {
        this.loading = false; //关闭加载
        this.dataList = result.data;
      });
    },
    //上传图片
    startUp(file) {
      const $this = this;
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        uploads(this.result, "types")
          .then(result => {
            if (result.data) {
              $this.$Message.success("上传成功！");
              $this.file = result.data;
            }
          })
          .catch(error => {
            $this.loadingImg = false; //关闭加载
            $this.$Message.error("上传失败！");
          });
      };
      return false;
    },
    cancel() {
      this.file = "";
    },
    //添加分类
    addType() {
      let type = 0;
      if (this.typeVal.length != 0) {
        const index = this.typeVal.length - 1;
        type = this.typeVal[index];
      }
      addType(this.typeName, type, this.file)
        .then(result => {
          if (result.data.affectedRows == 1) {
            this.$Message.success("添加成功！");
            this.file = '';//初始化
            this.typeName = '';
            //获取分类下拉
            this.getTypeSelect();
          } else {
            this.$Message.error("添加失败！");
          }
        })
        .catch(err => {
          this.$Message.error("添加失败！");
          throw err;
        });
    },
    getTypeSelect() {
      getTypeSelect()
        .then(result => {
          this.typeList = result.data;
        })
        .catch(err => {
          throw err;
        });
    }
  },
  mounted() {
    //获取分类列表
    this.getList();

    //获取分类下拉
    this.getTypeSelect();
  }
};
</script>
<style scoped>
#list-box {
  height: 100%;
  display: flex;
  flex-direction: columns;
}
.module {
  flex: 1;
  border-radius: 2px;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
}
#search-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 5px auto 20px auto;
}
.type-item {
  padding: 10px 0;
}
.type-item > span {
  display: inline-block;
  width: 60px;
  text-align: right;
}
#img-see {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
#img-see > img {
  width: 100%;
  height: 100%;
}
.src-item {
  width: 50px;
  height: 40px;
  margin: 5px 0;
}
</style>

